<template>
  <el-dialog :close-on-click-modal="false" title="查看历史" width="1200px" :visible.sync="visible">
    <el-row :gutter="16">
      <el-col :span="4">
        <template v-if="list.length > 0">
          <ul>
            <li
              @click="handleBtnClick(index)"
              v-for="(item,index) in list"
              :key="index"
              :class="[ liNum === index ? 'liBg' : '', 'common-li']"
            >
              <el-button type="text">
                {{ item.createUser }}
                <br />
                {{ formatTime(item.createTime) }}
              </el-button>
            </li>
          </ul>
        </template>
        <template v-else>
          <empty-comp />
        </template>
      </el-col>
      <el-col :span="20">
        <el-checkbox class="fr mb20" @change="handleCheckChange">去掉相同属性</el-checkbox>
        <e-table
          ref="eTable"
          :tableData="tableData"
          :columns="columns"
          :loading="loading"
          :pageObj="null"
        >
          <el-table-column
            v-for="item in wordArr"
            :key="item.key"
            :label="item.label"
            :slot="item.key"
            align="center"
          >
            <template slot-scope="scope">
              <template v-if="scope.row.key === 'createTime'">
                <span
                  :class="[ scope.row.old !== scope.row.new ? 'red' : '' ]"
                >{{ scope.row[item.key] ? formatTime(scope.row[item.key]) : null }}</span>
              </template>
              <template v-else-if="scope.row.key === 'marryStatus'">
                <span
                  :class="[ scope.row.old !== scope.row.new ? 'red' : '' ]"
                >{{ scope.row[item.key] === '0' ? '未婚' : ( scope.row[item.key] === '1' ? '已婚' : '离异' ) }}</span>
              </template>
              <template v-else-if="scope.row.key === 'verifyTime'">
                <span
                  :class="[ scope.row.old !== scope.row.new ? 'red' : '' ]"
                >{{ scope.row[item.key] ? formatTime(scope.row[item.key]) : null }}</span>
              </template>
              <template v-else-if="scope.row.key === 'verifyStatus'">
                <span
                  :class="[ scope.row.old !== scope.row.new ? 'red' : '' ]"
                >{{ computedVerifyStatus(scope.row[item.key]) }}</span>
              </template>
              <template v-else-if="scope.row.key === 'sex'">
                <span
                  :class="[ scope.row.old !== scope.row.new ? 'red' : '' ]"
                >{{ scope.row[item.key] && scope.row[item.key] === '001007001' ? '男' : '女' }}</span>
              </template>
              <template v-else>
                <span
                  :class="[ scope.row.old !== scope.row.new ? 'red' : '' ]"
                >{{ scope.row[item.key] }}</span>
              </template>
            </template>
          </el-table-column>
          <!-- <el-table-column label="现有版本" slot="new" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.key === 'createTime'">
                <span>{{ formatTime(scope.row.new) }}</span>
              </template>
              <template v-else-if="scope.row.key === 'marryStatus'">
                <span>{{ scope.row.new === '0' ? '未婚' : ( scope.row.new === '1' ? '已婚' : '离异' ) }}</span>
              </template>
              <template v-else-if="scope.row.key === 'verifyTime'">
                <span>{{ formatTime(scope.row.new) }}</span>
              </template>
              <template v-else-if="scope.row.key === 'verifyStatus'">
                <span>{{ computedVerifyStatus(scope.row.old) }}</span>
              </template>
              <template v-else>
                <span>{{ scope.row.new }}</span>
              </template>
            </template>
          </el-table-column>-->
        </e-table>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getSession } from '@/utils/util'
import { getUserInfoHistory, getUserOfficeHistory, getUserOffice, getUserContractHistory, getUserContract, getUserTrainHistory, getUserTrain, getUserEduHistory, getUserEdu, getUserWorkHistory, getUserWork } from '@/api/archives'

export default {
  data() {
    return {
      loading: false,
      isEdit: false,
      visible: false,
      userRow: getSession('userRow'),
      list: [],
      liNum: 0,
      objectNew: null,
      objectNow: null,
      keyList: [],
      keyWordMap: {},
      columns: [
        { label: '字段', prop: 'title' },
        {
          slot: 'old'
        },
        {
          slot: 'new'
        }
      ],
      wordArr: [
        {
          label: '历史版本',
          key: 'old'
        },
        {
          label: '现有版本',
          key: 'new'
        }
      ],
      tableData: [],
      basicMap: {
        userInfoId: '用户信息ID',
        userId: '用户主表ID',
        employeeId: '工号',
        name: '姓名',
        sex: '性别',
        birth: '出生年月',
        jobTitle: '职称',
        country: '国籍',
        nation: '民族',
        nativePlace: '籍贯',
        householdPlace: '户口所在地',
        politicalStatus: '政治面貌',
        idCard: '身份证号',
        idCardFront: '身份证图片(正)',
        idCardBack: '身份证图片(反)',
        phone: '手机号',
        workTel: '工作电话',
        familyTel: '家庭电话',
        address: '联系地址',
        qq: 'QQ号',
        wechat: '微信号',
        email: 'Email',
        partyDate: '入党日期',
        wageId: '工资号',
        bank: '开户行',
        bankSite: '开户网点',
        bankCardId: '银行卡号',
        personStatus: '人事状态',
        photo: '个人照片',
        resume: '个人简历说明',
        remark: '备注',
        createId: '创建人ID',
        createUser: '创建人姓名',
        createTime: '创建时间',
        verifyId: '审核人ID',
        verifyUser: '审核人姓名',
        verifyTime: '审核时间',
        verifyStatus: '审核状态',
        flag: '是否删除（0：否，1：是）',
        marryStatus: '婚姻状态',
        sexName: '性别名称',
        nationName: '民族名称',
        nativePlaceName: '籍贯名称',
        politicalStatusName: '政治面貌名称',
        savePathFront: '身份证图片(正)',
        savePathBack: '身份证图片(反)',
        personStatusName: '人事状态',
        photoSavePath: '个人照片路径',
        marryStatusName: '婚姻状态',
        state: '审核标识'
      },
      contractMap: {
        userContractId: '合同ID',
        userId: 'user主表ID',
        contractNo: '合同编号',
        deadline: '合同期限（月）',
        startDate: '合同开始时间',
        endDate: '合同结束时间',
        trialDeadline: '试用期限（月）',
        trialStartDate: '试用开始时间',
        trialEndDate: '试用结束时间',
        compensation: '经济补偿金',
        damage: '赔偿金',
        attachment: '合同附件',
        remark: '备注',
        createId: '创建人ID',
        createUser: '创建人姓名',
        createTime: '创建时间',
        verifyId: '审核人ID',
        verifyUser: '审核人姓名',
        verifyTime: '审核时间',
        verifyStatus: '审核状态（0：未审核，1：以审核）'
      },
      eduMap: {
        userEduId: '主键ID',
        userId: 'user主表ID',
        startDate: '入学时间',
        endDate: '毕业时间',
        gradSchool: '毕业学校',
        speciality: '专业',
        education: '学历，字典值',
        degree: '学位，字典值',
        eduSystem: '学制',
        diplomaNo: '学位证书编号',
        diplomaPhotocopy: '学位证书影印件',
        remark: '备注',
        createId: '创建人ID',
        createUser: '创建人姓名',
        createTime: '创建时间',
        verifyId: '审核人ID',
        verifyUser: '审核人姓名',
        verifyTime: '审核时间',
        verifyStatus: '审核状态（0：未审核，1：以审核）'
      },
      officeMap: {
        userOfficeId: '主键ID，UUID',
        userId: 'user主表ID',
        onboardingDate: '入职日期',
        qualifyDate: '转正日期',
        endDate: '任职终止时间',
        deptId: '科室ID',
        deptName: '科室名称',
        positionId: '岗位ID',
        positionName: '岗位名称',
        duty: '职务，字典值',
        dutyLevel: '职级，字典值',
        personType: '人员类别，字典值',
        chargeWork: '分管工作',
        remark: '备注',
        createId: '创建人ID',
        createUser: '创建人姓名',
        createTime: '创建时间',
        verifyId: '审核人ID',
        verifyUser: '审核人姓名',
        verifyTime: '审核时间',
        verifyStatus: '审核状态（0：未审核，1：以审核）'
      },
      trainMap: {
        userTrainId: '主键ID',
        userId: 'user主表ID',
        name: '培训名称',
        startDate: '开始时间',
        endDate: '结束时间',
        period: '学时',
        form: '培训方式',
        content: '培训内容',
        grade: '培训成绩',
        cost: '培训费用',
        remark: '备注',
        createId: '创建人ID',
        createUser: '创建人姓名',
        createTime: '创建时间',
        verifyId: '审核人ID',
        verifyUser: '审核人姓名',
        verifyTime: '审核时间',
        verifyStatus: '审核状态（0：未审核，1：以审核）'
      },

      workMap: {
        userWorkId: '主键ID',
        userId: 'user主表ID',
        startDate: '履历开始时间',
        endDate: '履历结束时间',
        workUnit: '工作单位',
        deptName: '所在科室',
        duty: '职务',
        majorDuty: '主要职责',
        majorPerformance: '主要业绩',
        voucher: '证明人',
        voucherPhone: '证明人电话',
        leaveReason: '离职原因',
        backCheck: '背景调查',
        remark: '备注',
        createId: '创建人ID',
        createUser: '创建人姓名',
        createTime: '创建时间',
        verifyId: '审核人ID',
        verifyUser: '审核人姓名',
        verifyTime: '审核时间',
        verifyStatus: '审核状态（0：未审核，1：以审核）'
      },
      filterArr: [],
      checkChange: null
    }
  },
  methods: {
    computedVerifyStatus(num) {
      let str = ''
      switch (num) {
        case 0:
          str = '未审核'
          break
        case 1:
          str = '已审核'
          break
        case 2:
          str = '审核中'
          break
        case 3:
          str = '审核不通过'
          break
        case 4:
          str = '历史记录'
          break
        default:
          break
      }
      return str
    },
    handleCheckChange(e) {
      console.log('e', e)
      this.checkChange = e
      this.tableData = []

      this.filterArr.map(v => {
        if (this.objectNew[v] === this.objectNow[v] && e) {
          return
        }
        this.tableData.push({
          key: v,
          title: this.keyWordMap[v],
          old: this.objectNew ? this.objectNew[v] : null,
          new: this.objectNow[v]
        })
      })
    },
    async show(type) {
      this.tableData = []
      this.visible = true
      // basic 基本 office 任职
      let res = null,
        res1 = null
      if (type === 'basic') {
        res = await getUserInfoHistory(this.userRow.userId)
        this.keyWordMap = this.basicMap
      } else if (type === 'office') {
        res = await getUserOfficeHistory(this.userRow.userId)
        res1 = await getUserOffice(this.userRow.userId)
        this.keyWordMap = this.officeMap
      } else if (type === 'contract') {
        res = await getUserContractHistory(this.userRow.userId)
        res1 = await getUserContract(this.userRow.userId)
        this.keyWordMap = this.contractMap
      } else if (type === 'train') {
        res = await getUserTrainHistory(this.userRow.userId)
        res1 = await getUserTrain(this.userRow.userId)
        this.keyWordMap = this.trainMap
      } else if (type === 'work') {
        res = await getUserWorkHistory(this.userRow.userId)
        res1 = await getUserWork(this.userRow.userId)
        this.keyWordMap = this.workMap
      } else if (type === 'edu') {
        res = await getUserEduHistory(this.userRow.userId)
        res1 = await getUserEdu(this.userRow.userId)
        this.keyWordMap = this.eduMap
      }
      if (res.data.length > 0) {
        this.list = res.data
        this.objectNew = this.list[0]
      } else {
        this.list = []
        this.objectNew = null
      }
      if (res1) {
        this.objectNow = Object.assign({}, res1.data[0])
      } else {
        this.objectNow = Object.assign({}, this.userRow)
      }
      this.keyList = Object.keys(this.objectNow)

      this.filterArr = this.keyList.filter(v => v.indexOf('Id') < 0 && v.indexOf('verify') < 0)
      console.log('filterArr', this.filterArr)

      this.filterArr.map(v => {
        this.tableData.push({
          key: v,
          title: this.keyWordMap[v],
          old: this.objectNew ? this.objectNew[v] : null,
          new: this.objectNow[v]
        })
      })

      console.log('objectNew', this.objectNew)
    },
    handleBtnClick(index) {
      console.log('index', index)

      this.liNum = index
      this.objectNew = Object.assign({}, this.list[index])
      this.tableData = []
      this.filterArr.map(v => {
        if (this.objectNew[v] === this.objectNow[v] && this.checkChange) {
          return
        }
        this.tableData.push({
          key: v,
          title: this.keyWordMap[v],
          old: this.objectNew ? this.objectNew[v] : null,
          new: this.objectNow[v]
        })
      })
    }
  },
  created() {
    // this.keyWordMap =
  }
}
</script>

<style scoped>
.liBg {
  background-color: #1890ff;
}

.liBg .el-button--text {
  color: #ffffff;
}

.common-li .el-button {
  line-height: 24px;
  text-align: left;
}
</style>
